<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{ background:#0E83CD;  }
.a1{ width: 150px; height: 50px; overflow: hidden; line-height: 50px; text-align:center; background: none; color: #fff; font-size: 18px; border: #fff 2px solid;  margin:30px; border-radius: 0px; position: relative; cursor: pointer; float: left; }
.a1:after{ width: 150px; height: 50px; background: #fff; content: "";transition:all .2s;position: absolute; left: 0; top: -50px; z-index: -1;  }
.a1:hover:after{transition:all .2s; top: 0px;}
.a1:hover{ color: #0E83CD; }
.a2{ width: 150px; height: 50px; overflow: hidden; line-height: 50px; text-align:center; background: none; color: #fff; font-size: 18px; border: #fff 2px solid;  margin:30px; border-radius: 0px; position: relative; cursor: pointer;  float: left;}
.a2:after{ width: 150px; height: 50px; background: #fff; content: "";transition:all .2s;position: absolute; left: 0; top: 50px; z-index: -1;  }
.a2:hover:after{transition:all .2s; top: 0px;}
.a2:hover{ color: #0E83CD; }
.a3{ width: 150px; height: 50px; overflow: hidden; line-height: 50px; text-align:center; background: none; color: #fff; font-size: 18px; border: #fff 2px solid;  margin:30px; border-radius: 0px; position: relative; cursor: pointer; float: left; }
.a3:after{ width: 150px; height: 50px; background: #fff; content: "";transition:all .2s;position: absolute; left: -150px; top: 0px; z-index: -1;  }
.a3:hover:after{transition:all .2s; left: 0px;}
.a3:hover{ color: #0E83CD; }
.a4{ width: 150px; height: 50px; overflow: hidden; line-height: 50px; text-align:center; background: none; color: #fff; font-size: 18px; border: #fff 2px solid;  margin:30px; border-radius: 0px; position: relative; cursor: pointer;  float: left;}
.a4:after{ width: 150px; height: 50px; background: #fff; content: "";transition:all .2s;position: absolute; left:150px; top: 0px; z-index: -1;  }
.a4:hover:after{transition:all .2s; left: 0px;}
.a4:hover{ color: #0E83CD; }

.b1{ width: 150px; height: 50px; overflow: hidden; line-height: 50px; text-align:center; background: none; color: #fff; font-size: 18px; border: #fff 2px solid;  margin:30px; border-radius: 0px; position: relative; cursor: pointer; float: left; }
.b1:after{ width: 0%; height: 102%; background: #fff; content: ""; opacity: 0;  position: absolute; top: 50%;left: 50%; z-index: -1;transform: translateX(-50%) translateY(-50%);transition: all .8s; }
.b1:hover:after{ width: 90%;opacity: 1; transition: all .8s; }
.b1:hover{ color: #0E83CD; }
.b2{ width: 150px; height: 50px; overflow: hidden; line-height: 50px; text-align:center; background: none; color: #fff; font-size: 18px; border: #fff 2px solid;  margin:30px; border-radius: 0px; position: relative; cursor: pointer; float: left; }
.b2:after{ width: 100%; height: 0%; background: #fff; content: "";transition: all .8s;  opacity: 0;  position: absolute; top: 50%;left: 50%; z-index: -1;transform: translateX(-50%) translateY(-50%);}
.b2:hover:after{ height: 90%;opacity: 1; transition: all .8s; }
.b2:hover{ color: #0E83CD; }
.b3{ width: 150px; height: 50px; overflow: hidden; line-height: 50px; text-align:center; background: none; color: #fff; font-size: 18px; border: #fff 2px solid;  margin:30px; border-radius: 0px; position: relative; cursor: pointer; float: left; }
.b3:after{ width: 100%; height: 0%; background: #fff; content: "";transition: all .8s;  opacity: 0;  position: absolute; top: 50%;left: 50%; z-index: -1;transform: translateX(-50%) translateY(-50%) rotate(45deg);}
.b3:hover:after{ height: 135%;opacity: 1; transition: all .8s; }
.b3:hover{ color: #0E83CD; }
.b4{ width: 150px; height: 50px; line-height: 50px; text-align:center; background: #f00; color: #fff; font-size: 18px;  margin:30px; border-radius: 20px;box-shadow: 0 5px #ab3c3c; position: relative; cursor: pointer; float: left;transition: all .3s; }

.b4:active{line-height: 53px;transition: all .3s;box-shadow: 0 0px #ab3c3c; }
</style>
</head>
<body>
<div class="a1">内容</div>
<div class="a2">内容</div>
<div class="a3">内容</div>
<div class="a4">内容</div>
<div style="width: 100%; height: 1px; float: left;"></div>
<div class="b1">内容</div>
<div class="b2">内容</div>
<div class="b3">内容</div>
<div class="b4">内容</div>
</body>
</html>